<template>
    <el-container class="buy">
      <back></back>
        <el-main>
          <div class="top">
            <h5>云商汇平台诚信会员认证服务购买</h5>
            <p>现在购买现在购买现在购买现在购买现在购买现在购买现在购买</p>
          </div>
          <div class="type">
            <p>请选择套餐类型</p>
            <div class="list">
              <li v-for="item in list" :key="item.id">
                <el-radio @change="isClick(item.id,item.amount)" :label="item.amount" v-model="type"><p>{{item.name}} <i class="iconfont icon-iconmoney"><b>{{item.amount}}</b></i></p></el-radio>
                <p class="l" v-if="item.extra == 1">(赠送平台售后保障服务)</p>
              </li>

            </div>

          </div>
          <div class="tip">
            <p>购买后立即生效,到期后将会下架店铺，如有需要，请及时购买</p>
          </div>
        </el-main>
        <el-footer>
          <span><i class="iconfont icon-iconmoney"></i><b>{{type}}</b></span>
          <span class="pay" @click="pay">支付</span>
        </el-footer>
    </el-container>
</template>

<script>
  import back from '@/components/back'
    export default {
        data(){
          return{
            type:'',
            list:[],
            time:'',
            data:{},

          }
        },
      methods:{
        isClick(index,val){
          this.type = val
          if(index == 1){
            this.time = '0'
          }else if(index == 2){
            this.time = '1'
          }else {
            this.time = '2'
          }
          console.log(this.time,this.type);
        },

        onBridgeReady(){
          let that = this;
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest',{
              "appId":this.data.appId,     //公众号名称，由商户传入
              "timeStamp":this.data.timeStamp,         //时间戳，自1970年以来的秒数
              "nonceStr":this.data.nonceStr, //随机串
              "package":this.data.package,
              "signType":this.data.signType,         //微信签名方式：
              "paySign":this.data.paySign //微信签名
            },
            function (res) {
              if(res.err_msg === "get_brand_wcpay_request:ok" ){
                that.$message.success('支付成功')
                that.$router.push('/')
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
              }else if (res.err_msg === 'get_brand_wcpay_request:fail') {
                that.$message.error('网络异常，请重试')
              }
            });
        },
        pay(){
          if(this.type == ''){
            this.$message.warning('请选择套餐类型')
          }else {
            let openid = localStorage.getItem('openId');
            let params = {
              merchantId:this.merchantId,
              amount:this.type,
              //  amount:0.01,
              duration:this.time,
              openId:openid
            };
            console.log(this.time);
            this.$axios.post('api/front/wxpay/getCodeForMember',this.qs.stringify(params))
              .then(res => {
                this.data = res.data.obj;
                console.log(this.data,'请求后台接口获取到的')
                if (typeof WeixinJSBridge == "undefined"){
                  if( document.addEventListener ){
                    document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(), false);
                  }else if (document.attachEvent){
                    document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady());
                    document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady());
                  }
                }else{
                  this.onBridgeReady();
                }
              })
            return;

            this.$router.push('/indexs')
          }
        }
      },
      computed:{
        merchantId(){
          return this.$store.state.merchantId
        }
      },
      created(){
        this.merchantId = localStorage.getItem("merchantId");
      },
      mounted(){

          this.$axios.post('/api/front/costItem/member')
            .then(res => {
              this.list = res.data.obj
            })
      },
      components:{
        back,
      }
    }
</script>

<style scoped lang="scss">
.buy{
  display: flex;
  flex-direction: column;
  height: 100%;
  .el-main{
    height: 100%;
    .top{
      h5{
        font-size: 16px;
        font-weight: normal;
      }
      p{
        text-indent: 28px;
        color: #999;
        font-size: 14px;
        text-align: left;
        padding:0 15px;
      }
    }
    .type{
      p{
        font-size: 16px;
        text-align: left;
        padding-left: 15px;
        &.l{
          padding-left: 50px;
          font-size: 13px;
          color: red;
        }
      }
      .list{
        .el-radio{
          display: flex;
          flex-direction: row;
          padding-left: 30px;
          margin: 15px 0;
          p{
            padding: 0;
            margin: 0;
            i{
              font-size: 12px;
              color: red;
              margin-left: 15px;
              b{
                font-size: 16px;
              }
            }
          }
        }
      }
    }
    .tip{
      margin-top: 30px;
      p{
        font-size: 15px;
        color: #999;
        text-align: left;
        padding:0 15px;
      }
    }
  }
  .el-footer{
    display: flex;
    flex-direction: row;
    border-top: 1px solid #f1f1f1;
    box-shadow: 0px -1px 10px #ccc;
    padding: 0;
    padding-bottom: 10px;
    span{
      display: flex;
      flex-direction: row;
      padding: 10px 0;
      color: red;
      &:nth-child(1){
        width: 60%;
       display: inline-block;
        text-align: right;
        padding-right: 30px;
        i{
          font-size: 13px;
          font-weight: normal;
        }
        b{
          font-size: 20px;
        }
      }
      &:nth-child(2){
        display: inline-block;
        width: 40%;
        text-align: center;
        background: red;
        color: #fff;
        font-size: 16px;
      }
    }
  }
}
</style>
